<template>
  <page-body :bgImg='menuId == 1122 ? " " : ""'>
    <view class="jh-flex">
      <menu-bar :menuId='menuId' :propMenuList='menuList' @menuTap='menuTap'></menu-bar>
      <home ref='home' v-if="menuId == 1114"></home>
      <address-book ref='address-book' v-if="menuId == 1115"></address-book>
      <service ref='service' v-if="menuId == 1116"></service>
      <user ref='user' v-if="menuId == 1117" :avatar='avatar'></user>
      <search ref='search' v-if="menuId == 1120"></search>
      <system ref='system' v-if="menuId == 1121"></system>
      <qiyi ref='qiyi' v-if="menuId == 1122"></qiyi>
    </view>
  </page-body>
</template>

<script>
  import kevySwiper from '@/components/kevy-swiper/kevy-swiper.vue'
  import home from '@/pages/index/components/home/home.vue'
  import addressBook from '@/pages/index/components/home/address-book.vue'
  import service from '@/pages/index/components/home/service.vue'
  import user from '@/pages/index/components/home/user.vue'
  import search from '@/pages/index/components/home/search.vue'
  import system from '@/pages/index/components/home/system.vue'
  import qiyi from '@/pages/index/components/home/qiyi.vue'
  import {checkVersion} from '@/utils/index.js'
  import {
    mapState
  } from 'vuex'
  export default {
    components: {kevySwiper,home,addressBook,service,user,search,system,qiyi},
    data() {
      return {
        ossDomain: uni.ossDomain,
        allRoutes: uni.$ROUTES,
        menuId: 1114,
        avatar: '',
        webViewUrl: '',
        url: {
          index: 'showArticle',
          lianxijiaren: 'showArticle',
          lianxikefu: 'showArticle',
          gerenzhongxin: 'showArticle',
          aixinxiangce: '/pages/photo-album/index',
          neirongsousuo: 'showArticle',
          canshushezhi: 'showArticle',
        },
        version: '1.0.0',
      };
    },
    computed: {
      ...mapState({
        menuList: state => {
          // let arr = state.global.menuList[0].filter(e => {
          //   if (e.menu_id == 1118) {
          //     e.url = '/pages/photo-album/index'
          //   } else {
          //     e.url = e.menu_id
          //   }
          //   return e.menu_id != 1119
          // })
          return state.global.menuList[0]
        },
        userInfo: state => state.user.userInfo,
        sysInfo: state => state.global.systemInfo,
      }),
    },
    onLoad() {
      // #ifdef APP-PLUS
      plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
        this.version = wgtinfo.version
        this.checkVersion()
      })
      //#endif
    },
    async onShow() {
      // #ifdef APP-PLUS
      plus.navigator.setFullscreen(true)
      //#endif
      if (this.avatar) {
        let obj = {
          head_pic: this.avatar
        }
        await this.$http.updateInfo(obj).then(res => {
          this.userInfo.user.head_pic = obj.head_pic
          this.$store.commit('setUserInfo', this.userInfo);
        })
      }
      let ref = this.$refs
      for (let i in ref) {
        this.$refs[i] && this.$refs[i].show && this.$refs[i].show()
      }
      // #ifdef APP-PLUS
      for(let i = 0; i<10;i++) {
        setTimeout(()=>{
          const subNVue = uni.getSubNVueById('home-webview');
          subNVue.hide()
        },100 * i)
      }
      //#endif
    },
    methods: {
      checkVersion () {
        this.$http.appUpdated().then(res => {
          let info = res.data
          console.log(info);
          if (checkVersion(this.version,info.version)) {
            if (info.is_force) {
              uni.setStorageSync('update',info)
              this.$redirectTo('/pages/system/update/index')
              return
            }
            uni.showModal({
              title: '提示',
              content: '发现新版本: ' + info.version,
              success: (e) => {
                if (e.confirm) {
                  uni.setStorageSync('update',info)
                  this.$navigateTo('/pages/system/update/index')
                }
              }
            })
          }
        })
      },
      menuTap (e) {
        let url = this.url[e.url]
        if (url === 'showArticle') {
          //#ifdef APP-PLUS
          const subNVue = uni.getSubNVueById('home-webview');
          subNVue.hide()
          //#endif
          return this.menuId = e.menu_id
        } else if (url || e.url) {
          if ((e.url || url).indexOf('http') === 0) {
            // this.menuId = e.menu_id
            this.webViewUrl = (url || e.url)
            //#ifdef APP-PLUS
            this.showWebView()
            //#endif
          } else {
            uni.$navigateTo(url || e.url).then(res => {},err => {
              uni.hideToast()
              this.menuId = e.menu_id
              this.webViewUrl = 'http://app.huaxia-health.com/static/h5/index.html#/pages/404/404'
            })
          }
          return
        }
        this.menuId = e.menu_id
        this.webViewUrl = 'http://app.huaxia-health.com/static/h5/index.html#/pages/404/404'
      },
      //#ifdef APP-PLUS
      showWebView () {
        let url = encodeURIComponent(`${this.webViewUrl}`)
        uni.$navigateTo(`/pages/consultation/article?title=期颐壹号&url=${url}&serverType=1`)
        return
        let {
          screenHeight,
          screenWidth,
          safeArea,
          statusBarHeight
        } = this.sysInfo
        const subNVue = uni.getSubNVueById('home-webview');
        subNVue.setStyle({
          top: '51px',
          left: `${('0' || safeArea.left || statusBarHeight)+130}px`,
          width: `${screenWidth - ('0' || safeArea.left || statusBarHeight) - 160}px`,
          height: `${safeArea.bottom - 51}px`,
        })
        subNVue.show()
        uni.$emit('setWebWiew', {
          width: `${screenWidth - ('0' || safeArea.left || statusBarHeight) - 160}px`,
          height: `${safeArea.bottom - 51}px`,
          url: this.webViewUrl
        });
      },
      //#endif
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding-right: 30px;
  }
  .index{
    &-dot{
      margin: 8px 0;
      &-item{
        margin: 0 3px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #9FA0A0;
        &.active{
          background-color: #00374D;
        }
      }
    }
    &-hr{
      width: 100%;
      height: 1px;
      background-color: rgba(170, 167, 167, .5);
    }
    &-list{
      width: 100%;
      &-item{
        margin: 0 9px;
        height: 156px;
      }
      &-img{
        width: 88px;
        height: 88px;
        display: block;
      }
    }
  }
</style>
